<app-inner-header name="HEP" [loadCounter]="loadCounter"></app-inner-header>
 <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="selectedIndex" (selectedIndexChange)="mainTabChanged($event)">
  <mat-tab label="Search">
    <div>
      <div class="filter-container">
        <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                (click)="getRecords()">
          Get Records
        </button>
      </div>
      <div class="filter-container">
        <mat-form-field hideRequiredMarker>
          <mat-label>Filter Field</mat-label>
          <mat-select [(ngModel)]="filter.field" [disabled]="!columns" disableOptionCentering>
            <mat-option [value]="null">
              ---
            </mat-option>
            <mat-option *ngFor="let val of columns" [value]="val">
              {{val}}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field hideRequiredMarker>
          <mat-label>Operand</mat-label>
          <mat-select [(ngModel)]="filter.operand" [disabled]="!filter.field">
            <mat-option *ngFor="let val of operands" [value]="val" disableOptionCentering>
              {{val}}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field hideRequiredMarker>
        <mat-label>Value</mat-label>
        <input matInput name="Value" [(ngModel)]="filter.field_value" [disabled]="!filter.operand" required>
        </mat-form-field>
        <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                *ngIf="!filters[toEditFilter]"
                [disabled]="!filter.field_value || !filter.operand || !filter.field"
                (click)="addFilter()">
          Add filter
        </button>
        <button mat-raised-button color="accent" class="but-spacer-left switch-button"
                *ngIf="filters[toEditFilter]"
                [disabled]="!filter.field_value || !filter.operand || !filter.field"
                (click)="saveFilter()">
          Edit filter
        </button>
        <mat-form-field hideRequiredMarker>
          <mat-label>Order Field</mat-label>
          <mat-select [(ngModel)]="sortColumns" [disabled]="!columns" disableOptionCentering>
            <mat-option [value]="null">
              ---
            </mat-option>
            <mat-option *ngFor="let val of columns" [value]="val">
              {{val}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-checkbox [(ngModel)]="sortObject.desc" class="checkbox-spacer-left"
                      [disabled]="sortObject.fields.length == 0 && !sortColumns">DESC
        </mat-checkbox>
        <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                [disabled]="!sortColumns"
                (click)="addSorter()">
          Add sorting
        </button>
      </div>
      <div class="chips-pad">
        <mat-chip-listbox aria-label="Filter selection">
          <mat-chip color="accent"
                    *ngFor="let filterItem of filters; let i = index"
                    (click)="editFilter(i)"
                    [selectable]="true"
                    [removable]="true"
                    (removed)="removeFilter(filterItem)"
                    selected>
            {{filterItem.field}} {{filterItem.operand}} {{filterItem.field_value}}
            <mat-icon matChipRemove>cancel</mat-icon>
          </mat-chip>
          <mat-chip color="primary"
                    *ngIf="sortObject.fields.length > 0"
                    [selectable]="true"
                    [removable]="true"
                    (removed)="clearSorting()"
                    selected>
            <span>ORDER BY </span>
            <span *ngFor="let sort of sortObject.fields; let i = index;">{{sort}}<i
              *ngIf="i < sortObject.fields.length - 1">,</i> </span>
            <span *ngIf="sortObject.desc">DESC</span>
            <span *ngIf="!sortObject.desc">ASC</span>
            <mat-icon matChipRemove>cancel</mat-icon>
          </mat-chip>
        </mat-chip-listbox>
      </div>

      <div class="table-container" *ngIf="list.hepData">

        <table mat-table class="full-width-table" [dataSource]="list.hepData">
          <ng-container *ngFor="let disCol of columns; let colIndex = index" matColumnDef="{{disCol}}">
            <th mat-header-cell *matHeaderCellDef (click)="filter.field = disCol">{{disCol}}</th>
            <td mat-cell *matCellDef="let element" >
              <span>{{element[disCol]}}</span>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: columns" (click)="chooseCallId(row)"
              [ngClass]="{'chosen': toView[row['sip_call_id']]}"></tr>
        </table>
        <!--

              <mat-accordion displayMode="flat" multi class="mat-table full-width-table">
                <section matSort class="mat-elevation-z2 mat-header-row">
                  <span
                    class="mat-header-cell"
                    *ngFor="let disCol of columns; let colIndex = index"
                    (click)="filter.field = disCol"
                  >{{disCol}}</span>
                </section>
                <mat-expansion-panel *ngFor="let item of list.hepData">
                  <mat-expansion-panel-header class="mat-row">
                    <span class="mat-cell" *ngFor="let disCol of columns">{{item[disCol]}}</span>
                  </mat-expansion-panel-header>
                  <div><pre>{{item | json}}</pre></div>
                </mat-expansion-panel>
              </mat-accordion>
        -->

      </div>

      <mat-paginator *ngIf="pageTotal > 0"
                     [length]="pageTotal"
                     [pageIndex]="pageEvent.pageIndex"
                     [pageSize]="pageEvent.pageSize"
                     [pageSizeOptions]="paginationScale"
                     (page)="pageEvent = $event"
      >
      </mat-paginator>
    </div>
  </mat-tab>
  <mat-tab label="Details" [disabled]="selectedCallIds().length == 0">
    <mat-card>
      <mat-card-content>
        <article>
          <section class="pad">
          <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                  (click)="openExportBottomSheet()">
            Export
          </button>
          </section>
          <section class="flow">
            <app-svg-seq-diagram [inData]="list.hepDetails" (toView)="gotMsg($event)"></app-svg-seq-diagram>
          </section>
          <section class="msg">
            {{showMsg}}
          </section>
        </article>
        <!--pre>{{list.hepDetails | json}}</pre-->
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Settings">
    <mat-card>
      <mat-card-content>
      </mat-card-content>
    </mat-card>
  </mat-tab>
</mat-tab-group>
